import React, { ReactNode, } from 'react';
import { ButtonProps } from './Button';
import Divider from '../../divider/components/Divider';
import FlexRow from '../../flex/components/FlexRow';
import FlexColumn from '../../flex/components/FlexColumn';

type ButtonGroupProps = {
    children: ReactNode[],
    cuttingLineColor?: string,
    cuttingLineLength?: string,
    column?: boolean;

    // type?: "primary" | "secondary" | "tertiary" | "warning" | "danger" | string,
    // width?: string,
    // theme?: "solid" | "outline" | "light" | "borderless" | string;
    // style?: React.CSSProperties;
    // size?: "large" | "medium" | "small" | string;
    // block?: boolean;
    // icon?: ReactNode;
    // disabled?: boolean;
    // onClick?: () => void;
    // picposition?: "left" | "right" | string;
    // isLoading?: boolean;
    // margin?: string;
    // rounded?: string;
    // className?: string;

};

const ButtonGroup = ({ children, cuttingLineColor = "after:border-gray-300", cuttingLineLength = "h-3/5", column = false }: ButtonGroupProps) => {
    let dividerDirection = "vertical" as "horizontal" | "vertical";
    if (column) {
        cuttingLineLength = "w-3/5";
        dividerDirection = "horizontal";
    }
    let resChildren;
    if (!children || !Array.isArray(children) || children.length === 0) {
        return null;
    }
    //处理分割线颜色
    if (children[0]) {
        const firstChild = children[0] as { props: { theme: string, type: string; }; };
        if (firstChild.props.theme === "borderless" || firstChild.props.theme === "outline") {
            if (firstChild.props.type === 'primary') {
                cuttingLineColor = "after:border-(--myTheme-color-primary)";
            } else if (firstChild.props.type === 'secondary') {
                cuttingLineColor = "after:border-(--myTheme-color-secondary)";
            } else if (firstChild.props.type === 'tertiary') {
                cuttingLineColor = "after:border-(--myTheme-color-tertiary)";
            } else if (firstChild.props.type === 'warning') {
                cuttingLineColor = "after:border-(--myTheme-color-warning)";
            } else if (firstChild.props.type === 'danger') {
                cuttingLineColor = "after:border-(--myTheme-color-danger)";
            }
        }
    }
    //传入的子元素只有一个
    if (React.Children.count(children) === 1) {
        if (React.isValidElement<ButtonProps>(children)) {
            resChildren = React.cloneElement(children, {
                ...(children.props as object),
                margin: 'm-0',
            });
        }
        return <div className='my-2 ml-2'>{resChildren}</div>;
    } else if (React.Children.count(children) === 2) {
        //传入的子元素只有两个
        resChildren = React.Children.map(children, (child, index) => {
            if (React.isValidElement<ButtonProps>(child)) {

                if (index === 0) {
                    let borderStyle;
                    if (child.props.theme === 'outline') {
                        borderStyle = { borderRight: "0" } as React.CSSProperties;
                    }
                    return (
                        <>
                            {React.cloneElement(child, {
                                ...(child.props as object),
                                margin: 'm-0',
                                rounded: 'rounded-l-[3px] rounded-r-0',
                                style: borderStyle,

                            })}
                            <Divider width={cuttingLineLength} height={cuttingLineLength} direction={dividerDirection} color={cuttingLineColor} />
                        </>);

                } else if (index === 1) {
                    let borderStyle;
                    if (child.props.theme === 'outline') {
                        borderStyle = { borderLeft: "0" } as React.CSSProperties;
                    }
                    return React.cloneElement<ButtonProps>(child, {
                        ...(child.props as object),
                        margin: 'm-0',
                        rounded: 'rounded-r-[3px] rounded-l-0',
                        style: borderStyle,
                    });
                }
            }
        });

    } else {
        resChildren = React.Children.map(children, (child, index) => {
            if (React.isValidElement<ButtonProps>(child)) {
                if (index === 0) {
                    let borderStyle;
                    if (child.props.theme === 'outline') {
                        borderStyle = { borderRight: "0" } as React.CSSProperties;
                    }
                    return (
                        <>
                            {React.cloneElement(child, {
                                ...(child.props as object),
                                margin: 'm-0',
                                rounded: 'rounded-l-[3px] rounded-r-0',
                                style: { ...child.props.style, ...borderStyle }
                            })}
                            <Divider direction={dividerDirection} color={cuttingLineColor} />
                        </>);

                } else if (index === React.Children.count(children) - 1) {
                    let borderStyle;
                    if (child.props.theme === 'outline') {
                        borderStyle = { borderLeft: "0" } as React.CSSProperties;
                    }
                    return React.cloneElement<ButtonProps>(child, {
                        ...(child.props as object),
                        margin: 'm-0',
                        rounded: 'rounded-r-[3px] rounded-l-0',
                        style: { ...child.props.style, ...borderStyle }
                    });
                } else {
                    let borderStyle;
                    if (child.props.theme === 'outline') {
                        borderStyle = { borderLeft: "0", borderRight: "0" } as React.CSSProperties;
                    }
                    return (
                        <>
                            {React.cloneElement(child, {
                                ...(child.props as object),
                                margin: 'm-0',
                                rounded: 'rounded-0',
                                style: { ...child.props.style, ...borderStyle }
                            })}
                            <p className='h-auto flex  before:border-1 before:border-blue-500 before:bg-red-300 before:h-3/5 before:content-[""]'></p>
                            <Divider direction={dividerDirection} color={cuttingLineColor} />
                        </>);
                }
            }
        });
    }

    return (
        <>
            {column ?
                <FlexColumn className='items-center !gap-0 !p-0'>
                    {resChildren}
                </FlexColumn>
                :
                <div className='flex bg-amber-100 h-auto'>
                    {resChildren}
                </div>}
        </>
    );
};

export default ButtonGroup;
